<template>
  <view class="booklook">
    <!-- 上部分 -->
    <view class="book-top">
      <view class="status-bar"></view>
      <view class="top">
        <view class="top-left" @click="topindex()">
          <image src="../../static/booklook/fanhui.png" mode=""></image>
        </view>
        <view class="top-tit">
          账户总览
        </view>
        <view class="top-right">
          <image src="../../static/booklook/inquiry_msg.png"></image>
          <image src="../../static/booklook/inquiry_plus.png" class="right-last"></image>
        </view>
      </view>
      <!-- tab栏 -->
      <view class="book-tab">
        <view @click="checkIndex(1)" :class="bookShow==1?'active':'tab-top'">
          财富全景
        </view>
        <view @click="checkIndex(2)" :class="bookShow==2?'active':'tab-top'">
          银行卡
        </view>
      </view>
      <!-- tab栏 -->
    </view>
    <!-- 上部分 -->
    <!-- 财富全景 -->
    <view v-show="bookShow==1" class="book-one">
      <view class="book-wealth">
        <view class="book-wealth-item">
          <view class="wealth-top">
            <view class="wealth-top-left">
              我的资产
            </view>
            <view class="wealth-top-right">
              总负债
            </view>
          </view>
          <view class="wealth-middle">
            <view class="wealth-middle-top">
              <view>总资产(元)</view>
              <view>昨日收益(元)</view>
            </view>
            <view class="wealth-middle-bottom">
              <view class="wealth-middle-bottom-left">
                0.60
              </view>
              <view class="wealth-middle-bottom-right">
                --
              </view>
            </view>
          </view>
          <view class="wealth-bottom">
            资产视图
          </view>
        </view>
      </view>
      <!-- 图标 -->
      <view class="icon-box">
        <view class="grid">
          <u-grid col="3">
            <u-grid-item v-for="(item,i) in list" :key="i">
              <image :src="item.image" class="kernelimg"></image>
              <text class="grid-text">{{item.tit}}</text>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
      <!-- 资产 -->
      <view class="property">
        <view class="property-top">
          <view class="property-tit">资产</view>
          <view class="property-sma-tit">(含外币折算)</view>
        </view>
        <view class="property-middle">
          <view class="middle-tit">活期</view>
          <view class="property-middle-right">
            <view class="middle-num">
              ￥0.60
            </view>
            <view class="middle-image">
              <image src="../../static/booklook/goright.png" mode=""></image>
            </view>
          </view>
        </view>
        <view class="property-list">
          <view class="property-list-item">
            <view class="list-item-name">
              持仓总额
            </view>
            <view class="list-item-num">
              ￥0.00
            </view>
          </view>
          <view class="property-bottom">
            <view class="property-bottom-item" v-for="(item,index) in property">
              <view class="middle-tit">{{item.tit}}</view>
              <view class="property-middle-right">
                <view class="middle-num">
                  {{item.con}}
                </view>
                <view class="middle-image">
                  <image src="../../static/booklook/goright.png" mode=""></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- end -->
      <view class="end">
        <view class="end-item">
          <view class="end-img">
            <image src="../../static/booklook/bank_logo.png" mode=""></image>
          </view>
          <view class="end-txt">
            中国建设银行保障账户安全
          </view>
        </view>
      </view>
    </view>
    <!-- 财富全景 -->
    <!-- 银行卡 -->
    <view v-show="bookShow==2" class="book-two">
      <view class="card-tab">
        <view :class="cardShow==1?'tab-show':'tab-item'" @click="cardIndex(1)">储蓄卡</view>
        <view :class="cardShow==2?'tab-show':'tab-item'" @click="cardIndex(2)">信用卡</view>
      </view>
      <!-- 储蓄卡 -->
      <view v-show="cardShow==1" class="card-one">
        <!-- 建设银行-->
        <view class="jianshe">
          <view class="jianshe-top">
            <view class="top-card">
              <view class="card-icon">
                <image src="../../static/booklook/bank_logo.png" mode=""></image>
              </view>
              <view class="card-txt">
                <view class="card-name">
                  <view class="name">
                    建设银行(0910)
                  </view>
                  <view class="more">
                    查看卡号
                  </view>
                </view>
                <view class="card-con">
                  龙卡通
                </view>
              </view>
              <view class="card-more"></view>
            </view>
            <view class="bottom-card">
              <view class="card-icon"></view>
              <view class="card-txt">
                <view class="card-name">
                  <view class="name">
                    可用余额(元)
                  </view>
                  <view class="more">
                    <image src="../../static/booklook/offEye.png" mode="" v-show="imageShow" @click="add"></image>
                    <image src="../../static/booklook/inquiry_eye.png" mode="" v-show="!imageShow" @click="add"></image>
                  </view>
                </view>
                <view class="card-con" v-show="imageShow">
                  ***
                </view>
                <view class="card-con" v-show="!imageShow">
                  0.60
                </view>
              </view>
              <view class="card-more">
                详情
              </view>
              <!-- 首选 -->
              <view class="big-first">
                <view class="small-first">
                  首选
                </view>
              </view>
            </view>
          </view>
          <view class="jianshe-bottom">
            <view class="bot-but" @click="todetail()">明细</view>
            <view class="bot-but">转账</view>
            <view class="bot-but">无卡取款</view>
            <view class="bot-but">买理财</view>
          </view>
        </view>
        <!-- e账户 -->
        <view class="user">
          <view class="user-top">
            <view class="user-tit">
              e账户
            </view>
            <view class="user-con">
              只要您持有工行、农行、中行、建行、交行、邮储银行的境内储蓄卡、即可享受建行的优质投资理财服务,如速盈(货币基金)、专属高收益理财产品、基金投资、专户理财、养老保障产品、账户贵金属等。
            </view>
          </view>
          <view class="user-bottom">
            立即体验
          </view>
        </view>
        <!-- 个人养老金 -->
        <view class="user">
          <view class="user-top">
            <view class="user-tit">
              个人养老金
            </view>
            <view class="user-con">
              个人养老金账户为电子II类账户，是我行为个人客户提供的个人养老金专用资金账户，具有资金存入、登记税延额度、投资交易、待遇领取、代扣代缴个人所得税、查询资金与权益信息等功能。
            </view>
          </view>
          <view class="user-bottom">
            立即开户
          </view>
        </view>
        <!-- end -->
        <view class="end">
          <view class="end-item">
            <view class="end-img">
              <image src="../../static/booklook/bank_logo.png" mode=""></image>
            </view>
            <view class="end-txt">
              中国建设银行保障账户安全
            </view>
          </view>
        </view>
      </view>
      <!-- 储蓄卡 -->
      <!-- 信用卡 -->
      <view v-show="cardShow==2" class="card-two">
        <view class="user">
          <view class="user-top">
            <view class="user-tit">
              个人养老金
            </view>
            <view class="user-con">
              个人养老金账户为电子II类账户，是我行为个人客户提供的个人养老金专用资金账户，具有资金存入、登记税延额度、投资交易、待遇领取、代扣代缴个人所得税、查询资金与权益信息等功能。
            </view>
          </view>
          <view class="user-bottom">
            立即开户
          </view>
        </view>
        <!-- end -->
        <view class="end">
          <view class="end-item">
            <view class="end-img">
              <image src="../../static/booklook/bank_logo.png" mode=""></image>
            </view>
            <view class="end-txt">
              中国建设银行保障账户安全
            </view>
          </view>
        </view>
      </view>
      <!-- 信用卡 -->
    </view>
    <!-- 银行卡 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imageShow: true,
        bookShow: 2,
        cardShow: 1,
        list: [{
          image: '/static/booklook/account_details.png',
          tit: '账户明细'
        }, {
          image: '/static/booklook/remittance_transfer.png',
          tit: '转账汇款'
        }, {
          image: '/static/booklook/wealth_preservation.png',
          tit: '财富体验'
        }],
        property: [{
          tit: '存款产品',
          con: '起存点低、安全稳健',
        }, {
          tit: '基金',
          con: '优选基金、—元起投',
        }, {
          tit: '理财产品',
          con: '理财有方、稳重求进',
        }, {
          tit: '保险',
          con: '多重保障、关爱生命',
        }]
      };
    },
    methods: {
      topindex() {
        uni.navigateBack({
          delta: 1
        })
      },
      todetail() {
        uni.navigateTo({
          url: "/pages/index/detail"
        })
      },
      checkIndex(index) {
        this.bookShow = index
      },
      cardIndex(index) {
        this.cardShow = index
      },
      add() {
        this.imageShow = !this.imageShow
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F6F6F6;
  }

  .booklook {
    width: 100vw;

    // 上部分
    .book-top {
      background-image: url("");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      // border: 1px solid #000;
      height: 240rpx;
      overflow: hidden;
      width: 100vw;
      position: fixed;
      z-index: 999;

      .status-bar {
        width: 100vw;
        height: var(--status-bar-height);
      }

      .top {
        width: 90vw;
        margin: 0 auto;
        height: 88rpx;
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;
        box-sizing: border-box;

        .top-left {
          image {
            width: 50rpx;
            height: 50rpx;
          }
        }

        .top-tit {
          color: #fff;
          font-size: 40rpx;
        }

        .top-right {
          image {
            width: 50rpx;
            height: 50rpx;
          }

          .right-last {
            margin-left: 20rpx;
          }
        }
      }

      .book-tab {
        display: flex;
        width: 90vw;
        margin: 20rpx auto;
        height: 60rpx;

        .tab-top {
          color: #739DEF;
          margin-right: 40rpx;
        }

        .active {
          color: #fff;
          margin-right: 40rpx;
          border-bottom: 6rpx solid #fff;
        }
      }
    }

    // 上部分
    // 财富全景
    .book-one {
      padding-top: 238rpx;
      position: relative;
      // height: 1800rpx;

      .book-wealth {
        background-color: #2D5FD4;
        height: 260rpx;
        position: relative;

        .book-wealth-item {
          overflow: hidden;
          width: 90vw;
          margin: 0 auto;
          position: absolute;
          background-color: #5173D7;
          border-radius: 20rpx;
          left: 0;
          position: relative;
          color: #fff;
          padding: 30rpx;
          box-sizing: border-box;

          .wealth-top {
            display: flex;
            justify-content: space-between;

            .wealth-top-left {
              font-size: 40rpx;
            }
          }

          .wealth-middle {
            margin: 30rpx 0;

            .wealth-middle-top {
              display: flex;
              justify-content: space-between;
              font-size: 30rpx;
            }

            .wealth-middle-bottom {
              display: flex;
              justify-content: space-between;

              .wealth-middle-bottom-left {
                font-size: 50rpx;
                font-weight: bold;
              }

              .wealth-middle-bottom-right {
                font-size: 50rpx;
                font-weight: bold;
              }
            }
          }

          .wealth-bottom {
            text-align: center;
          }
        }
      }

      // 图标
      .icon-box {
        margin-top: 80rpx;

        .kernelimg {
          width: 70rpx;
          height: 70rpx;
          margin-top: 30rpx;
        }

        .grid-text {
          font-size: 24rpx;
          margin-top: 10rpx;
        }
      }

      // 资产
      .property {
        margin: 30rpx auto;
        width: 90vw;

        .property-top {
          display: flex;

          .property-tit {
            font-size: 40rpx;
            margin-right: 10rpx;
          }
        }

        .property-middle {
          height: 100rpx;
          line-height: 100rpx;
          border-radius: 10rpx;
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          padding: 0 30rpx;
          box-sizing: border-box;
          margin: 20rpx 0;

          .middle-tit {
            font-size: 40rpx;
          }

          .property-middle-right {
            display: flex;

            .middle-num {
              font-size: 36rpx;
              font-weight: bold;
            }

            .middle-image {
              margin-top: 5rpx;
              margin-left: 20rpx;

              image {
                width: 20rpx;
                height: 30rpx;
              }
            }
          }
        }

        .property-list {
          background-color: #fff;
          padding: 0 30rpx;
          box-sizing: border-box;
          border-radius: 10rpx;

          .property-list-item {
            height: 100rpx;
            line-height: 100rpx;
            display: flex;
            justify-content: space-between;

            .list-item-name {
              font-size: 40rpx;
            }

            .list-item-num {
              font-size: 36rpx;
              font-weight: bold;
            }
          }

          .property-bottom {
            .property-bottom-item {
              height: 100rpx;
              line-height: 100rpx;
              display: flex;
              justify-content: space-between;
              border-top: 1px solid #F3F3F3;

              .middle-tit {
                font-size: 40rpx;
              }

              .property-middle-right {
                display: flex;

                .middle-num {
                  font-size: 36rpx;
                  color: #5D5D5D;
                }

                .middle-image {
                  margin-top: 5rpx;
                  margin-left: 20rpx;

                  image {
                    width: 20rpx;
                    height: 30rpx;
                  }
                }
              }
            }
          }
        }
      }

      // end
      .end {
        width: 60vw;
        height: 100rpx;
        margin: 20rpx auto;

        .end-item {
          display: flex;

          .end-img {
            margin-right: 20rpx;

            image {
              width: 30rpx;
              height: 30rpx;
            }
          }

          .end-txt {
            font-size: 26rpx;
            color: #9A9A9A;
          }
        }
      }
    }


    // 财富全景
    // 银行卡
    .book-two {
      padding-top: 240rpx;
      position: relative;

      .card-tab {
        width: 90vw;
        margin: 30rpx auto;
        display: flex;

        .tab-item {
          margin-right: 20rpx;
          color: #424242;
          padding: 5rpx 20rpx;
          border-radius: 30rpx;
          box-sizing: border-box;
        }

        .tab-show {
          background-color: #E5EAF9;
          color: #5071B5;
          margin-right: 20rpx;
          border-radius: 30rpx;
          padding: 5rpx 20rpx;
          box-sizing: border-box;
        }
      }

      // 储蓄卡
      .card-one {
        width: 90vw;
        margin: 0 auto;

        // 建设银行
        .jianshe {
          background-color: #fff;
          padding: 20rpx;
          box-sizing: border-box;
          border-radius: 20rpx;

          .jianshe-top {
            background-image: url('../../static/booklook/inquiry_bg.png');
            background-size: 100% 100%;
            height: 240rpx;
            position: relative;

            .top-card {
              display: flex;
              padding: 20rpx 0;

              .card-icon {
                width: 20vw;
                text-align: center;

                image {
                  width: 80rpx;
                  height: 80rpx;
                }
              }

              .card-txt {
                width: 65vw;

                .card-name {
                  display: flex;

                  .name {
                    margin-right: 20rpx;
                  }

                  .more {
                    font-size: 30rpx;
                    color: #4E7AC2;
                  }
                }

                .card-con {
                  font-size: 30rpx;
                  color: #97989C;
                }
              }

              .card-more {
                width: 15vw;
              }
            }

            .bottom-card {
              display: flex;
              justify-content: space-between;
              padding-right: 20rpx;

              .card-icon {
                width: 20vw
              }

              .card-txt {
                width: 65vw;

                .card-name {
                  display: flex;

                  .name {
                    margin-right: 20rpx;
                    color: #97989C;
                  }

                  .more {
                    image {
                      width: 30rpx;
                      height: 20rpx;
                    }
                  }
                }

                .card-con {
                  font-size: 40rpx;
                  font-weight: bold;
                }
              }

              .card-more {
                width: 15vw;
                height: 50rpx;
                padding: 0 10rpx;
                border: 1px solid #5F89A0;
                border-radius: 30rpx;
                text-align: center;
                color: #5C7FA3;
                margin-top: 10rpx;
              }

              // 首选
              .big-first {
                position: absolute;
                color: #9BBDF6;
                border: 1rpx solid #9BBDF6;
                border-radius: 100%;
                height: 80rpx;
                width: 80rpx;
                text-align: center;
                top: 10vw;
                right: 20vw;
                transform: rotate(-30deg);

                .small-first {
                  border: 1px dashed #9BBDF6;
                  border-radius: 100%;
                  line-height: 60rpx;
                  width: 60rpx;
                  height: 60rpx;
                  margin: 0 auto;
                  margin-top: 8rpx;
                  font-size: 24rpx;
                }
              }
            }
          }

          .jianshe-bottom {
            display: flex;
            justify-content: space-between;

            .bot-but {
              width: 25vw;
              text-align: center;
              border-right: 1px solid #ccc;
              margin: 20rpx 0;
            }

            .bot-but:last-child {
              border-right: none;
            }
          }
        }

        // e账户
        .user {
          background-color: #fff;
          padding: 20rpx;
          box-sizing: border-box;
          border-radius: 20rpx;
          margin-top: 30rpx;

          .user-top {
            background-image: url('');
            background-size: 100% 100%;
            // height: 300rpx;
            padding: 20rpx;
            box-sizing: border-box;

            .user-tit {
              font-size: 40rpx;
              margin-bottom: 10rpx;
            }

            .user-con {
              font-size: 30rpx;
              color: #A1A2A7;
            }
          }

          .user-bottom {
            height: 60rpx;
            line-height: 80rpx;
            text-align: center;
            color: #6170AB;
          }
        }

        // end
        .end {
          width: 60vw;
          height: 100rpx;
          margin: 20rpx auto;

          .end-item {
            display: flex;

            .end-img {
              margin-right: 20rpx;

              image {
                width: 30rpx;
                height: 30rpx;
              }
            }

            .end-txt {
              font-size: 26rpx;
              color: #9A9A9A;
            }
          }
        }
      }

      // 信用卡
      .card-two {
        width: 90vw;
        margin: 0 auto;

        .user {
          background-color: #fff;
          padding: 20rpx;
          box-sizing: border-box;
          border-radius: 20rpx;
          margin-top: 30rpx;

          .user-top {
            background-image: url('');
            background-size: 100% 100%;
            // height: 300rpx;
            padding: 20rpx;
            box-sizing: border-box;

            .user-tit {
              font-size: 40rpx;
              margin-bottom: 10rpx;
            }

            .user-con {
              font-size: 30rpx;
              color: #A1A2A7;
            }
          }

          .user-bottom {
            height: 60rpx;
            line-height: 80rpx;
            text-align: center;
            color: #6170AB;
          }
        }

        // end
        .end {
          width: 60vw;
          height: 100rpx;
          margin: 20rpx auto;
          margin-top: 100vw;


          .end-item {
            display: flex;

            .end-img {
              margin-right: 20rpx;

              image {
                width: 30rpx;
                height: 30rpx;
              }
            }

            .end-txt {
              font-size: 26rpx;
              color: #9A9A9A;
            }
          }
        }
      }
    }

    // 银行卡
  }
</style>